<template>
  <div class="top">
    <div class="item">
      <div class="title">

        <el-row :gutter="20">
          <el-col :span="2">
            <div class="grid-content bg-purple">
              选择
            </div>
          </el-col>

          <el-col :span="2">
            <div class="grid-content bg-purple">编号</div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">足迹图片</div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">审核</div>
          </el-col>

          <el-col :span="6">
            <div class="grid-content bg-purple">操作</div>
          </el-col>

        </el-row>
      </div>

      <Imgitem
        :imgInfo = "imgInfo"
        :is_all = "is_all" 
        @delete_one = 'delete_one' 
        v-loading="loading"
        @check_item = "check_item"
        >
      </Imgitem>

      <BottomBtn 
        :bottom = 'bottom_info' 
        :all_arr = 'temp_list_arr'
        @getPage = 'getPage' 
        @is_all = "isAll"
        :isCheck = "is_show_all_check">>
      </BottomBtn>

    </div>
  </div>
</template>


<script>
import Imgitem from './item'
import BottomBtn from './bottomBtn'

import {imgDown} from '@/network/allMessage/imgDown'
import {updateIsShow} from '@/network/allMessage/imgDown'

export default {
  name: "allImg",
  data(){
    return{
      imgInfo:'',
      bottom_info:'',
      loading:false,
      newPage:1,
      //多选全部的数组（足迹）
      temp_list_arr:'',
      //是否全选
      is_all:false,
      is_show_all_check:{
          num:0,//本页面共有多少数据
          checkNum:0//被选中的
      }
    }
  },
  components:{
    Imgitem,
    BottomBtn
  },
  methods:{
    //接收当前页码
    getPage(value){
      this.newPage = value
    },
    //全选
    allChecked(value){
      this.is_all_list = value
    },
     //删除一个
    delete_one(val){
      this.loading = true
      updateIsShow(val).then( res => {
        if(this.imgInfo.length == 1){
              this.newPage = this.newPage -1 
          }
          imgDown(this.newPage).then(res => {
          this.bottom_info = res.data.result.pop()
          res.data.result.forEach((item,index) =>{
          //添加一个全选的标志
          res.data.result[index]['is_all']= false
          if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
          }else{
              res.data.result[index].is_show = false
          }
        })
          this.imgInfo = res.data.result
          this.loading = false
          this.$message({
              message: '删除成功',
              type: 'success'
          })
        }).catch(err => {
          console.log(err)
        })

      }).catch( err => {
        console.log(err)
      })
    },

    //选中的(删除多个)
    check_item(value){
      this.temp_list_arr = value
      this.is_show_all_check.checkNum = value.length
    },
     //全选
    isAll(val){
      this.is_all = val
    }
  },
  created(){
     imgDown().then( res => {
            this.bottom_info = res.data.result.pop()
            //清除最后一条记录的页码数和总数
            res.data.result.forEach((item,index) =>{
                //添加一个全选的标志
                res.data.result[index]['is_all']= false
                if(res.data.result[index].is_Show == 1){
                    res.data.result[index].is_Show = true
                }else{
                    res.data.result[index].is_Show = false
                }
            })
             this.imgInfo = res.data.result
             this.is_show_all_check.num = this.imgInfo.length
             //console.log(this.imgData)
        }).catch( err => {
            console.log(err)
        })
  },
  watch:{
      newPage(newVal){
        imgDown(newVal).then(res => {
        this.bottom_info = res.data.result.pop()
        res.data.result.forEach((item,index) =>{
          //添加一个全选的标志
          res.data.result[index]['is_all']= false
          if(res.data.result[index].is_show == 1){
              res.data.result[index].is_show = true
          }else{
              res.data.result[index].is_show = false
          }
        })
          this.imgInfo = res.data.result
          this.is_show_all_check.num = this.imgInfo.length
          this.temp_all_arr = []

        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  padding: 10px;
  .item {
    background: #f5faff;
    .el-row {
      padding: 5px;
    }
    .grid-content {
      text-align: center;
    }
  }
}
.title {
  background: #ffffff;
  border-top: 2px solid #62b3ff;
}
</style>